<template>
  <div class="content">
    <h3>
      奖金模板
      <Icon type="ios-help-circle-outline" size="18" color="#000" @click="onHelp" />
    </h3>
    
    <div class="btn-right">
      <Button type="primary" v-if="name == 'bonusTemplateAudit'" style="width: 100px" @click="onAudit">
        审批
      </Button>
      <Button type="primary" v-if="name == 'bonusTemplateDetail' || name == 'bonusTemplateAuditDetail'" style="width: 100px" @click="onFlow">
        流程信息
      </Button>
    </div>
    
    <dt-info :label-width="90" ref='info1' :options='options1' style="width: 60%;" />

    <div class="detail">
      <div class="title">
        <p>奖金模板明细</p>
        <Button type="primary" size="small" v-if="name == 'bonusTemplateEdit'" @click="onAdd">
          新增明细
        </Button>
      </div>
      <dt-grid ref="table" :columns="columns" :list="list" height-resize />
    </div>

    <dt-info :label-width="90" ref='info2' :options='options2' style="width: 60%;" />
    <Button type="primary" v-if="name == 'bonusTemplateEdit'" @click="onSubmit" style="margin: 0 0 40px 110px;">
      提交审批
    </Button>
    
    <dt-loading :loading="loading" />
    <audit-modal ref="audit" />
    <process-modal ref="process" />
    <help-modal ref="help" />
  </div>
</template>

<script>
  import auditModal from '@/components/biz/audit/audit-modal.vue'
  import processModal from '@/components/biz/audit/process-modal.vue'
  import helpModal from '../parameter/components/help-modal.vue'
  import editMgr from './opt/edit.js'
  import columnOpt from './opt/detailColumn.js'
  import templateMgr from '@/biz/bonus/template.js'

  export default {
    components: {
      auditModal,
      processModal,
      helpModal
    },
    data() {
      return {
        options1: [],
        options2: [],
        info: {
          templateName: '',
          templateType: 'STANDARD',
          productIds: [],
          effectiveWay: '2',
          effectiveStartDate: '',
          effectiveEndDate: '',
          accessoryBOList: [],
          remark: '',
          oaCode: ''
        },
        columns: [],
        list: [],
        loading: false,
        name: '',
      }
    },
    mounted() {
      this.name = this.$route.name
      this.show()
      this.columns = columnOpt.options(this)
      this.$refs.table.init(this)
      if (this.$route.query.templateId) {
        this.detail()
      }
      if (this.name == 'bonusTemplateEdit') {
        window.onbeforeunload = function (e) {
          return ''
        }
      }
    },
    destroyed () {
      window.onbeforeunload = null
    },
    methods: {
      detail() {
        this.loading = true
        templateMgr.detail(this.$route.query.templateId).then(res => {
          delete res.templateId
          let info = {
            ...res,
            templateName: this.name !== 'bonusTemplateEdit' ? res.templateName : ''
          }
          // 模板引入不复制的字段
          if (this.$route.query.flag == 'import') {
            info.productIds = []
            info.effectiveWay = '2'
            info.effectiveStartDate = ''
            info.effectiveEndDate = ''
            info.accessoryBOList = []
            info.remark = ''
            info.oaCode = ''
          }
          this.info = info
          this.list = res.bonusTemplateDetailInfos
          this.columns = columnOpt.options(this)
          this.show()
          this.loading = false
        })
      },
      show() {
        this.options1 = editMgr.options1(this)
        this.options2 = editMgr.options2(this)
        this.$refs.info1.init(this.options1, this.info)
        this.$refs.info2.init(this.options2, this.info)
        this.$nextTick(() => {
          this.$refs.info1.update()
          this.$refs.info2.update()
        })
      },
      update() {
        this.list = []
        this.columns = columnOpt.options(this)
      },
      onAdd() {
        this.list.push({
          detailName: '',
          postIds: [],
          issueType: '1',
          scaleType: '1',
          fixedAmount: 0,
          settlementType: this.info.templateType == 'PRE' ? 'CONTRACT' : '',
          settlementProportion: 0,
          'REBATE': 0,
          'YEAR_END': 0,
          'HANDOVER': 0,
        })
      },
      onDelete(data) {
        let index = this.list.findIndex(i => i == data)
        this.list.splice(index, 1)
      },
      onHelp() {
        this.$refs.help.show(editMgr.helps())
      },
      onValidate1() {
        return this.$refs.info1.validate()
      },
      onValidate2() {
        return this.$refs.info2.validate()
      },
      onSubmit() {
        Promise.all([this.onValidate1(), this.onValidate2()]).then(res => {
          if (res[0] && res[1]) {
            if (templateMgr.validateDetail(this.list, this.info.templateType)) {
              this.loading = true
              templateMgr.save({
                ...this.info,
                bonusTemplateDetailInfos: this.list
              }).then(res => {
                this.loading = false
                this.$Message.success('提交成功')
                templateMgr.saveSearch(null)
                this.$store.commit('deleteroutefun', this.$route.meta.title)
                this.$router.go(-1)
              }).catch(() => {
                this.loading = false
              })
            }
          } else {
            this.$Message.error('数据有误，请检查并填写完整')
          }
        })
      },
      onAudit() {
        this.$refs.audit.show({
          auditId: this.$route.query.auditId,
          businessId: this.$route.query.templateId,
          auditType: 1
        })
      },
      onFlow() {
        this.$refs.process.show({
          businessId: this.$route.query.templateId,
          auditType: 1
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .content {
    padding: 20px;
    position: relative;
    
    h3 {
      i {
        cursor: pointer;
      }
    }
  }

  .detail {
    margin-left: 26px;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      p {
        line-height: 20px;
        border-left: 3px solid #2b85e4;
        padding-left: 8px;
      }
    }
  }
  
  .btn-right {
    position: absolute;
    right: 20px;
    top: 20px;
  }
</style>
